<template>
  <div class="cron-day-week-box">
    <el-row>
      <el-radio
        v-model="selectData.radioType"
        label="1"
      >
        {{ weekText.every }}
      </el-radio>
    </el-row>
    <el-row>
      <el-radio
        v-model="selectData.radioType"
        label="0"
      >
        {{ weekText.doNotSpecify }}
      </el-radio>
    </el-row>
    <el-row>
      <el-radio
              v-model="selectData.radioType"
              label="2"
      >
        {{ weekText.cycle[0] }}
        <el-input-number
                v-model="selectData.rangeStart"
                size="small"
                :min="1"
                :max="7"
        />
        {{ weekText.cycle[1] }}
        <el-input-number
                v-model="selectData.rangeEnd"
                size="small"
                :min="2"
                :max="7"
        />
        {{ weekText.cycle[2] }}
      </el-radio>
    </el-row>
    <el-row>
      <el-radio
        v-model="selectData.radioType"
        class="long"
        label="3"
      >
        {{ weekText.specificWeek }}
        <el-select
          v-model="selectData.specificSpecific"
          size="small"
          multiple
          @change="specificSpecificSort"
          @visible-change="(bl) => {
            optionShow(bl,3)
          }"
        >
          <el-option
            v-for="(item,index) in weekSelect"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-radio>
    </el-row>
    <el-row>
      <el-radio
        v-model="selectData.radioType"
        label="4"
      >
        {{ weekText.someWeekday[0] }}
        <el-input-number
          v-model="selectData.cronNthDayNth"
          size="small"
          :min="1"
          :max="5"
        />
        {{ weekText.someWeekday[1] }}
        <el-select
          v-model="selectData.cronNthDayDay"
          size="small"
          @visible-change="(bl) => {
            optionShow(bl,4)
          }"
        >
          <el-option
            v-for="(item,index) in weekSelect"
            :key="index"
            :label="item.label"
            :value="item.id"
          />
        </el-select>
      </el-radio>
    </el-row>
    <el-row>
      <el-radio
              v-model="selectData.radioType"
              label="5"
      >
        {{ weekText.lastWeek[0] }}
        <el-select
                v-model="selectData.cronLastDayDay"
                size="small"
                @visible-change="(bl) => {
            optionShow(bl,5)
          }"
        >
          <el-option
                  v-for="(item,index) in weekSelect"
                  :key="index"
                  :label="item.label"
                  :value="item.id"
          />
        </el-select>
      </el-radio>
    </el-row>
  </div>
</template>

<script>
  import mixin from './mixins'
  export default {
    mixins: [mixin],
    props: {
      // 设置回显的参数
      displayData: {
        type: String,
        default() {
          return null
        }
      },
      // 设置选中的radio
      radioType: {
        // eslint-disable-next-line
        type: Number | String,
        default() {
          return null // 0不指定，1通配，2每隔,3指点具体，4第几
        }
      },
    },
    data(){
      return {
        weekText: {
          every: "每一周",
          doNotSpecify: "不指定",
          specificWeek: "具体星期几(可多选)",
          lastWeek: ["在这个月的最后一个"],
          nearestWeekday: ["最近的工作日（周一至周五）至本月", "日"],
          someWeekday: ["在这个月的第", "个"],
          cycle: ["周期从", "到", "周"]
        },
        weekSelect:[
          {
            label:"星期天",
            value:"SUN",
            id:1
          },
          {
            label:"星期一",
            value:"MON",
            id:2
          },
          {
            label:"星期二",
            value:"TUE",
            id:3
          },
          {
            label:"星期三",
            value:"WED",
            id:4
          },
          {
            label:"星期四",
            value:"THU",
            id:5
          },
          {
            label:"星期五",
            value:"FRI",
            id:6
          },
          {
            label:"星期六",
            value:"SAT",
            id:7
          },
        ],
        selectData:{
          radioType:'0', // 0不指定，1通配，2每隔,3指点具体，4第几
          specificSpecific:["SUN"],
          cronNthDayDay:1,
          cronNthDayNth:'1',
          cronLastDayDay: 1,
          rangeStart:'', // 从多少开始
          rangeEnd:'', // 到多少结束
        },
      }
    },
    computed: {
      // 计算显示
      dataText() {
        let weeks = '';
        let type = this.selectData.radioType;
        switch (type.toString()){
          case '0':
            weeks = '?';
            break;
          case '1':
            weeks = '*';
            break;
          case '2':
            weeks = this.selectData.rangeStart+'-'+this.selectData.rangeEnd;
            break;
          case '3':
            weeks = this.selectData.specificSpecific.join(',');
            break;
          case '4':
            weeks = this.selectData.cronNthDayNth+"#"+this.selectData.cronNthDayDay;
            break;
          case '5':
            weeks = this.selectData.cronLastDayDay+"L";
            break;
          default:
            if(this.displayData) {
              weeks = this.displayData;
            }
        }
        return weeks;
      },
    },
    watch: {
      "displayData": {
        handler(){
          this.displayDataChange();
        },
        deep:true
      },
      dataText:{
        handler(newVal){
          this.$emit('change', newVal, 'week')
        },
        deep:true
      }
    },
    created() {
      this.displayDataChange();
    },
    methods: {
      displayDataChange: function () {
        let regOne = /^[0-9]*[L]$/; // 判断1l
        let arr = [];
        if (this.displayData) {
          let d = this.displayData;
          if (d === "*") {
            this.selectData.radioType = '1';
          } else if (d === "?") {
            this.selectData.radioType = '0';
          } else if (d.indexOf("-") !== -1) {
            arr = this.displayData.split('-');
            this.selectData.rangeStart = arr[0]; // 从多少开始
            this.selectData.rangeEnd = arr[1]; // 到多少结束
            this.selectData.radioType = '2'
          } else if (this.checkWeek(d)) {
            this.selectData.specificSpecific = this.getWeekVal([d], 'value');
            this.selectData.radioType = '3'
          } else if (d.indexOf(',') !== -1) {
            arr = this.displayData.split(',');
            // 检查有没有重复的参数
            for (let i = 0; i < arr.length; i++) {
              if (arr.indexOf(arr[i]) !== arr.lastIndexOf(arr[i])) {
                console.log("week回显参数错误")
                return
              }
            }
            this.selectData.specificSpecific = this.getWeekVal(arr, 'value');
            this.selectData.radioType = '3'
          } else if (d.indexOf('#') !== -1) {
            arr = this.displayData.split('#');
            // 检查有没有重复的参数
            for (let i = 0; i < arr.length; i++) {
              if (arr.indexOf(arr[i]) !== arr.lastIndexOf(arr[i])) {
                console.log("week回显参数错误")
                return
              }
            }
            this.selectData.cronNthDayNth = arr[0]; // 从多少开始
            this.selectData.cronNthDayDay = arr[1]; // 到多少结束
            this.selectData.radioType = '4'
          } else if (regOne.test(d)) {
            arr = this.displayData.split('L');
            this.selectData.cronLastDayDay = arr[0];
            this.selectData.radioType = '5'
          }else {
            this.selectData.radioType = 'null';
          }
        }
      },
      checkWeek(weekData) {
        let arrVal = [];
        this.weekSelect.map(item => {
            arrVal.push(item.value)
        })
        if(arrVal.indexOf(weekData) !== -1) {
          return true
        }else {
          return false
        }
      },
      getWeekVal(data, type) {
        let arr = []
        this.weekSelect.map(item => {
          if(Array.isArray(data)) {
            for(let i = 0; i < data.length; i++) {
              if(item.value === data[i]) {
                arr.push(item[type])
                break;
              }else if(item.id === data[i]){
                arr.push(item[type])
                break;
              }
            }
          }else {
            if(item.value === data) {
              arr.push(item[type])
            }else if(item.id === data){
              arr.push(item[type])
            }
          }
        })
        if(!Array.isArray(data)){
          return arr.join('')
        }else {
          return  arr
        }
      },
      // 下拉框改变时
      specificSpecificSort() {
        let arr = [];
        // 排序
        this.weekSelect.map((item) => {
          let num = this.selectData.specificSpecific.indexOf(item.value);
          if(num !== -1){
            arr.push(this.selectData.specificSpecific[num])
          }
        })
        this.selectData.specificSpecific = arr;
      },
      // 显示下拉框的options
      optionShow(boolean, num) {
        if(boolean) {
          this.selectData.radioType = String(num);
        }
      }
    }
  }
</script>

<style scoped>
  .cron-day-week-box .el-row {
    margin: 10px 0;
  }
  .cron-day-week-box .el-row .long .el-select {
    width: 350px;
  }
  .cron-day-week-box .el-row .el-input-number {
    width: 110px;
  }
</style>